<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"></detail-nav-bar>
    <scroll class="content" ref="scroll">
      <detail-swiper :top-images="topImages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info
        :detailInfo="detailInfo"
        @imageLoad="imageLoad"
      ></detail-goods-info>
      <detail-param-info :paramInfo="paramInfo"></detail-param-info>
    </scroll>
  </div>
</template>

<script>
import DetailNavBar from "./childComps/DetailNavBar.vue";
import DetailSwiper from "./childComps/DetailSwiper.vue";

//引入封装的detail请求
import { getDetail, Goods, Shop, GoodsParam } from "network/detail";

//轮播图下的信息展示
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";
import DetailShopInfo from "./childComps/DetailShopInfo.vue";

//bs
import Scroll from "../../components/common/scroll/Scroll.vue";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo.vue";
import DetailParamInfo from './childComps/DetailParamInfo.vue';

export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamInfo,
  },


      data() {
    return {
      iid: null,
      topImages: [],
      // goods: null, //注意这里不能写null，上面展示数据会报错
      goods: {}, //轮播图下的信息展示
      shop: {}, //店铺信息
      detailInfo: {}, //保存商品详情数据
      paramInfo: {}, //获取参数信息
    };
  },
  created() {
    //保存传入的iid
    this.iid = this.$route.params.iid;

    //根据iid请求详细数据
    getDetail(this.iid).then((res) => {
      // console.log(res);
      const data = res.result;
      console.log("根据iid请求详细数据", data);
      //轮播图
      this.topImages = data.itemInfo.topImages;

      //轮播图下的数据
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );

      //获取店铺信息
      this.shop = new Shop(data.shopInfo);

      //保存商品详情数据
      this.detailInfo = data.detailInfo;

      //获取参数信息
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
    });
  },
  mounted() {},
  methods: {
    //出现和首页相同的问题，一开始加载的高度不够，
    imageLoad() {
      this.$refs.scroll.scroll.refresh();
    },
  },
};
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 999;
  background-color: #fff;
  height: 100vh;
}

.detail-nav {
  position: relative;
  z-index: 99;
  background-color: #fff;
}

.content {
  height: calc(100% - 44px);
}
</style>